uniapp手动实现折叠面板（展开一项，其他项收起）

2023-03-30 16:03| 来源: 网络整理| 查看: 265

效果如下：

1 2 3 4 5 6 7 {{item.head}} 8 9 {{item.subnum}}道 10 11 12 13 14 15 16 17 {{itemMsg.msg}} 18 19 {{itemMsg.num}}道 20 21 22 23 24 1 2 export default { 3 data() { 4 return { 5 disabled:false, 6 show: false, 7 itemList: [{ 8 head: "考点名称1", 9 subnum: '12', 10 body: [{ 11 msg: '111', 12 num: '3', 13 }, 14 { 15 msg: '222', 16 num: '2', 17 } 18 ], 19 open: false, 20 disabled: true, 21 imgUrl1: '../../../static/images/bottom.png', 22 imgUrl2: '../../../static/images/top.png', 23 }, { 24 head: "考点名称2", 25 subnum: '10', 26 body: [{ 27 msg: '333', 28 num: '4', 29 }, 30 { 31 msg: '444', 32 num: '5', 33 } 34 ], 35 open: false, 36 imgUrl1: '../../../static/images/bottom.png', 37 imgUrl2: '../../../static/images/top.png', 38 }, { 39 head: "考点名称3", 40 subnum: '7', 41 body: [{ 42 msg: '666', 43 num: '4', 44 }, 45 { 46 msg: '555', 47 num: '3', 48 } 49 ], 50 open: false, 51 imgUrl1: '../../../static/images/bottom.png', 52 imgUrl2: '../../../static/images/top.png', 53 }], 54 55 } 56 }, 57 methods: { 58 changeContent(item,index) { 59 this.itemList.forEach(i => { 60 if (i.open !== this.itemList[index].open) { 61 i.open = false; 62 } 63 }) 64 item.open = !item.open 65 } 66 } 67 } 68 1 .collapse { 2 padding: 0 36rpx; 3 } 4 5 .coll-header { 6 display: flex; 7 height: 140rpx; 8 align-items: center; 9 justify-content: space-between; 10 } 11 12 .box { 13 overflow: hidden; 14 transition: all 0.3; 15 border-bottom: 1px solid #F9F9F9; 16 } 17 18 .head-txt { 19 margin-left: 15rpx; 20 font-size: 32rpx; 21 font-weight: 700; 22 } 23 24 .sub-num { 25 font-size: 28rpx; 26 color: #999999; 27 } 28 .box-circle { 29 width:36rpx; 30 height: 36rpx; 31 border-radius: 50%; 32 background-color: #18BBB4; 33 margin-left: 4rpx; 34 margin-right: 19rpx; 35 } 36 .box-cont { 37 display: flex; 38 justify-content: space-between; 39 margin-bottom: 50rpx; 40 } 41 .box-cont:last-child{ 42 margin-bottom:20rpx; 43 }

原文地址：https://www.cnblogs.com/lks6/p/14124555.html

【本文地址】

公司简介

联系我们